<template>
  <div class="ant-product" @click="$router.push({ path: '/pages/productInfo/productInfo', query: { goods_id: data.goods_id } }) ">
    <div class="ant-product-pic">
      <img mode="widthFix" :src="data.goods_logo" />
    </div>
    <div class="ant-product-info">
      <div class="ant-product-header">
        <p class="ant-product-name">{{data.goods_name}}</p>
      </div>
      <div class="ant-product-body">
        <p v-if="data.sales_sum">销量{{data.sales_sum}}</p>
      </div>
      <div class="ant-product-footer">
        <p class="ant-product-price">￥{{data.market_price||data.shop_price}}</p>
        <div class="ant-product-controller" v-if="!isCollection&&!data.is_collect" @click.stop="getMallCollect(data)">
          <img mode="widthFix" class="ant-product-controller-icon" src="../../static/images/icon-collection.png" />
        </div>
        <div class="ant-product-controller" v-if="!isCollection&&data.is_collect" @click.stop="cancelCollect(data)">
          <img mode="widthFix" class="ant-product-controller-icon" src="../../static/images/icon-already-collected.png" />
        </div>
        <div class="ant-product-controller" v-if="isCollection" @click.stop="cancelCollect(data)">
          <img mode="widthFix" class="ant-product-controller-icon" src="../../static/images/icon-already-collected.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getMallCollect,
    cancelCollect,
  } from "@/utils/index";
  export default {
    props: ['data', 'collectionCallBack', 'cancelCollectCallBack', 'isCollection'],

    data() {
      return {};
    },
    methods: {
      getMallCollect() {
        console.log("点击了收藏")
        getMallCollect({
          goods_id: this.data.goods_id
        }).then((res) => {
          console.log("收藏成功1111")
          console.log(res)
        }).catch(error => {
          console.log(error)
        })
      },
      cancelCollect() {
        console.log("取消")
        cancelCollect({
          goods_id: this.data.goods_id
        }).then((res) => {
          console.log(res)
          console.log("取消成功")
        }).catch(error => {
          console.log(error)
        })
      },
    },
  };

</script>

<style lang="less">
  .ant-product {
    font-size: 0;
    display: flex;
    padding: 0 15px;
    margin-bottom: 10px;

    .ant-product-pic {
      width: 82px;
      height: 82px;
      margin-right: 12px;
      background: #F9F9F9;
      border-radius: 5px;

      img {
        width: 82px;
        height: 82px;
      }
    }

    .ant-product-info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .ant-product-header {
        padding-bottom: 5px;

        .ant-product-name {
          font-size: 14px;
          color: rgba(96, 96, 96, 1);
          line-height: 18px;
        }
      }

      .ant-product-body {
        display: flex;
        flex-direction: column;
        flex: 1;

        p {
          font-size: 12px;
          color: rgba(160, 160, 160, 1);
          line-height: 18px;
        }
      }

      .ant-product-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .ant-product-price {
        font-size: 15px;
        color: rgba(238, 117, 89, 1);
        line-height: 15px;
      }

      .ant-product-controller {
        width: auto;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;

        .ant-product-controller-icon {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

</style>
